import { FC } from "react";
import Taro from "@tarojs/taro";
import { View, Text, Image } from "@tarojs/components";
import styles from "./index.module.less";
import { HIcon } from "@/components";
import { UserInfo } from "@/service/type";
import { IMG_HOST } from "@/constants/host";

interface Props {
  userInfo: UserInfo;
  onLogin: () => void;
}

const User: FC<Props> = ({ userInfo, onLogin }) => {
  const onLookMe = () => {
    if (userInfo.vip === "0") {
      return Taro.showModal({
        content: "你还没有开通会员哦~",
        confirmColor: "#FD486E",
        success: (e) => {
          if (e.confirm) {
            Taro.navigateTo({
              url: "/package/member/vip/index",
            });
          }
        },
      });
    }
  };

  const onStarMe = () => {
    if (userInfo.vip === "0") {
      return Taro.showModal({
        content: "你还没有开通会员哦~",
        confirmColor: "#FD486E",
        success: (e) => {
          if (e.confirm) {
            Taro.navigateTo({
              url: "/package/member/vip/index",
            });
          }
        },
      });
    }
  };

  function renderUser() {
    if (!userInfo.id) {
      return (
        <View className={styles["avator-wrapper"]} onClick={onLogin}>
          <Image
            className={styles["img"]}
            src={require("../../../../assets/img/touxiang.png")}
          ></Image>
          <Text className={styles["name"]}>请先登录</Text>
        </View>
      );
    }
    return (
      <View className={styles["avator-wrapper"]}>
        <Image
          className={styles["img"]}
          src={
            IMG_HOST + userInfo.headImg ||
            require("../../../../assets/img/touxiang.png")
          }
        ></Image>
        <Text className={styles["name"]}>{userInfo.username}</Text>
        <View
          className={styles["btn"]}
          onClick={() =>
            Taro.navigateTo({
              url: "/package/member/my-matchmaker/index",
            })
          }
        >
          获得红线
        </View>
      </View>
    );
  }

  return (
    <View className={styles["user-wrapper"]}>
      <View className={styles["bg-color"]}></View>
      <View className={styles["user-content"]}>
        <View className={styles["content"]}>
          {renderUser()}
          <View className={styles["record"]}>
            <View className={styles["item"]}>
              <Text className={styles["num"]}>0</Text>
              <Text className={styles["text"]}>牵线名额</Text>
            </View>
            <View className={styles["item"]} onClick={onLookMe}>
              <Text className={styles["num"]}>0</Text>
              <Text className={styles["text"]}>看过我的</Text>
            </View>
            <View className={styles["item"]} onClick={onStarMe}>
              <Text className={styles["num"]}>0</Text>
              <Text className={styles["text"]}>收藏我的</Text>
            </View>
          </View>
          <Image
            mode="widthFix"
            className={styles["banner"]}
            src={require("../../../../assets/img/banner2.png")}
          ></Image>
          <View
            className={styles["edit"]}
            onClick={() =>
              Taro.navigateTo({
                url: "/package/member/individuation/index",
              })
            }
          >
            <HIcon type="bianjisekuai" color="#999" size={42}></HIcon>
          </View>
        </View>
      </View>
    </View>
  );
};

export default User;
